import React, { useState, useEffect, useMemo } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { Button, Image } from 'react-native-elements';
import CardInfo from '../components/items/CardInfo';
import CustomDropdown from '../components/items/CustomDropdown';
import Footer from '../components/items/Footer';
import useArticles from '../hooks/useArticles';
import Loading from '../components/items/Loading';
import NavigationBar from '../components/items/NavigationBar'
import SidebarMenu from '../components/items/SidebarMenu'
// 定义精品文章组件
const ArticleCard = (list) => {
    console.log(list);
    return (
        <View>
            <View>
                {list.articlesList.map((item) => {
                    return (
                        <View key={item.id} style={styles.article_card}>
                            {/* 卡片1 */}
                            <View style={styles.article_card1}>
                                <Text style={styles.article_card1_title}>{item.title}</Text>
                                <Image style={styles.article_card_img}
                                       source={require('../assets/images/firmlogo.png')}
                                />
                            </View>
                            {/* 卡片2 */}
                            <View style={styles.article_card2}>
                                <Text style={styles.article_card2_text}>
                                    {item.title}
                                </Text>
                                <Text>
                                    {item.subtitle}
                                </Text>
                                <Text style={styles.article_card2_reading}>继续阅读</Text>
                            </View>
                        </View>
                    );
                })}
            </View>
        </View>
    )
}
const Home = () => {

    // 模拟菜单数据
    const menuItems = [
        { id: 1, title: '软件前后端', icon: 'tasks' },
        { id: 2, title: '科技业职涯', icon: 'laptop' },
        { id: 3, title: 'ChatGPT与Ai', icon: 'cubes' },
        { id: 4, title: '所有文章', icon: 'file-text-o' },
        { id: 5, title: '关于我们', icon: 'info-circle' },
    ]
    // 定义菜单项点击回调函数
    const handleMenuItemPress = (item) => {
        console.log(`点击了菜单项: ${item.title}`);
    };
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    // 切换菜单显示/隐藏
    const toggleMenu = () => {
        setIsMenuOpen(!isMenuOpen);
    };
    // 模拟卡片数据
    const cardItem = [
        {
            id: 1,
            title: "React Native 性能优化指南",
            author: "技术君",
            date: "2023-10-01",
            image: "https://picsum.photos/id/1/300/200",
            excerpt: "分享React Native项目中提升性能的10个实用技巧..."
        },
        {
            id: 2,
            title: "生成式AI在前端开发中的应用",
            author: "AI研究者",
            date: "2023-09-25",
            image: "https://picsum.photos/id/2/300/200",
            excerpt: "如何利用ChatGPT、Midjourney等工具提高开发效率..."
        },
        {
            id: 3,
            title: "Flexbox布局完全指南",
            author: "布局大师",
            date: "2023-09-18",
            image: "https://picsum.photos/id/3/300/200",
            excerpt: "从基础到进阶，掌握Flexbox在React Native中的所有用法..."
        }
    ];
    // 获取文章数据
    const { articles, loading, error } = useArticles();

    // 管理当前选中的分类
    const [selectedCategory, setSelectedCategory] = useState("");

    // 处理分类选择事件
    const handleCategorySelect = (value) => {
        setSelectedCategory(value);
    };

    // 当文章数据加载完成后，设置默认选中第一个分类
    useEffect(() => {
        if (articles.length > 0 && !selectedCategory) {
            setSelectedCategory(articles[0].title);
        }
    }, [articles, selectedCategory]);

    // 使用useMemo优化文章筛选逻辑
    const selectedArticles = useMemo(() => {
        const selected = articles.find((item) => item.title === selectedCategory);
        return selected ? selected.list : [];
    }, [articles, selectedCategory]);

    // 加载中和错误处理
    if (loading) {
        return (
            <View style={styles.loadingContainer}>
                <Loading
                    isFullScreen={false}
                    message="加载文章中..."
                    indicatorColor="#F97316"  // 使用与页面主题匹配的颜色
                    backgroundColor="#fff"
                />
            </View>
        );
    }
    if (error) return <Text style={styles.errorText}>Error: {error}</Text>;
    return (
        <SidebarMenu
            menuItems={menuItems}
            onMenuItemPress={handleMenuItemPress}
            isOpen={isMenuOpen}
            toggleMenu={toggleMenu}
            theme={{
                colors: {
                    primary: '#F97316', // 使用与应用一致的主题色
                    menuItemActive: '#F97316',
                },
                sizes: {
                    sidebarWidth: 0.70, // 稍微窄一点的侧边栏
                }
            }}
        >
            <ScrollView
                style={styles.page}
                contentContainerStyle={styles.contentContainerStyle}
            >
                {/* 顶部导航区 */}
                <View>
                    <NavigationBar toggleMenu={toggleMenu} />
                </View>
                <View style={styles.page_content}>
                    {/* 主要内容 */}
                    <View>
                        {/* Top */}
                        <View style={styles.topSection}>
                            {/* 标题 */}
                            <View style={styles.titleContainer}>
                                <View>
                                    <Text style={styles.title1}>
                                        超过百万次浏览的优质内容
                                    </Text>
                                </View>
                                <View style={styles.top_title3}>
                                    <Text style={styles.title2}>
                                        ExplainThis 带你掌握
                                    </Text>
                                    <Text style={styles.title2}>
                                        AI 时代的思维与能力
                                    </Text>
                                </View>
                                <View style={styles.top_title3}>
                                    <Text style={styles.title3}>
                                        最完整的软件开发、生成式 AI 资源
                                    </Text>
                                    <Text style={styles.title3}>
                                        在资讯爆炸的时代，汇整最精华的洞见
                                    </Text>
                                    <Text style={styles.title3}>
                                        陪伴你在职涯路上，走得更高更远
                                    </Text>
                                </View>
                            </View>

                            {/* 按钮导航 */}
                            <View style={styles.buttongroup}>
                                <Button
                                    title="E+ 成长计划"
                                    loadingProps={{ size: 'small', color: 'white' }}
                                    buttonStyle={styles.primaryButton}
                                    titleStyle={styles.buttonText}
                                    containerStyle={styles.buttonContainer}
                                    onPress={() => console.log('aye')}
                                />
                                <Button
                                    title="全端电子报"
                                    buttonStyle={styles.outlineButton}
                                    type="outline"
                                    titleStyle={styles.outlineButtonText}
                                    containerStyle={styles.buttonContainer}
                                />
                            </View>
                        </View>
                        {/* 卡片 */}
                        <View style={styles.cardsContainer}>
                            {cardItem.map((item) => {
                                return (
                                    <CardInfo
                                        id={item.id}
                                        key={item.id}
                                        item={item}
                                    />
                                )
                            })}
                        </View>
                        {/* 精选文章 */}
                        <View style={styles.article}>
                            {/* 标题 */}
                            <Text style={styles.article_title}>
                                精选文章
                            </Text>
                            {/* 下拉框 */}
                            <View style={styles.article_select}>
                                <CustomDropdown
                                    options={articles.map((item) => item.title)}
                                    onSelect={handleCategorySelect}
                                    defaultValue={selectedCategory}
                                    HomeStyle={styles.article_select_child}
                                />
                            </View>
                            {/* 卡片组 */}
                            <View>
                                <View>
                                    <ArticleCard
                                        articlesList={selectedArticles}
                                    />
                                </View>
                            </View>
                        </View>
                        {/* 底部 */}
                        <View style={styles.buttome}>
                            {/* 标题 */}
                            <View>
                                <Text style={styles.title1}>在程序员成长路上，有 ExplainThis 陪伴</Text>
                                <Text style={styles.buttome_subtitle}>E+ 成长计划</Text>
                            </View>
                            {/* 按钮 */}
                            <View>
                                <View style={styles.buttongroup}>
                                    <Button
                                        title="了解更多"
                                        loadingProps={{ size: 'small', color: 'white' }}
                                        buttonStyle={styles.primaryButton}
                                        titleStyle={styles.buttonText}
                                        containerStyle={styles.buttonContainer}
                                        onPress={() => console.log('aye')}
                                    />
                                    <Button
                                        title="联系ExplainThis"
                                        buttonStyle={styles.outlineButton}
                                        type="outline"
                                        titleStyle={styles.outlineButtonText}
                                        containerStyle={styles.buttonContainer}
                                    />
                                </View>
                            </View>
                        </View>
                    </View>
                </View>
                {/* 页脚 */}
                <View>
                        <Footer />
                </View>
            </ScrollView>
        </SidebarMenu>
    );
};

// 样式表（保持原始样式不变）
const styles = StyleSheet.create({
    titleContainer: {
        paddingHorizontal: 20, // 标题区域左右留白，与按钮对齐
    },
    title1: {
        color: '#F97316',
        fontSize: 20
    },
    title2: {
        fontSize: 32,
        fontWeight: '800'
    },
    title3: {
        fontSize: 14,
        fontWeight: '200',
    },
    top_title3: {
        marginTop: 20
    },
    buttongroup: {
        flexDirection: 'row',
        justifyContent: 'center', // 按钮组居中
        paddingHorizontal: 20,    // 与标题区域保持一致的左右留白
        marginTop: 30,            // 与标题拉开距离
    },
    // 按钮容器样式（控制按钮的整体大小和间距）
    buttonContainer: {
        flex: 1,                  // 保持平分宽度
        marginHorizontal: 5,     // 按钮之间的间距
        minWidth: 150,            // 最小宽度，确保按钮不会太窄
    },
    // 滚动容器样式：让内容可在垂直方向居中
    contentContainerStyle: {
        flexGrow: 1, // 允许滚动容器占满剩余空间
        justifyContent: 'center', // 垂直方向居中
    },
    // 主按钮样式
    primaryButton: {
        backgroundColor: 'rgba(111, 202, 186, 1)',
        borderRadius: 8,
        paddingVertical: 10,      // 增加垂直内边距，让按钮更高
        paddingHorizontal: 10,    // 增加水平内边距，让按钮更宽
    },
    //  outline按钮样式
    outlineButton: {
        borderColor: 'rgba(78, 116, 289, 1)',
        borderWidth: 2,           // 加粗边框
        borderRadius: 8,
        paddingVertical: 10,      // 与主按钮保持一致的高度
        paddingHorizontal: 10,
    },
    // 按钮文字样式
    buttonText: {
        fontWeight: 'bold',
        fontSize: 15,             // 增大字体
        color: '#fff',
    },
    outlineButtonText: {
        color: 'rgba(78, 116, 289, 1)',
        fontWeight: 'bold',
        fontSize: 15,             // 与主按钮文字大小一致
    },
    page_content: {
        flex: 1, // 占满滚动容器空间
        width: '100%', // 宽度铺满屏幕
        padding: 20
    },
    topSection: {
        flex: 1,
        marginBottom: 40, // 顶部区域与卡片区域拉开距离
    },
    // 卡片容器：控制卡片整体位置和宽度
    cardsContainer: {
        flex: 3,
        width: '90%', // 卡片宽度为屏幕的90%
        alignSelf: 'center', // 水平居中
        marginTop: 'auto', // 4. 顶部自动留白，推到中部
        marginBottom: 'auto', // 4. 底部自动留白，保持在中部
    },
    article: {
        flex: 3,
        width: '95%',
        backgroundColor: '#F9F9F9F9',
        borderRadius: 8,
        height: '100%'
    },
    article_title: {
        fontSize: 32,
        fontWeight: 800,
        textAlign: 'center'
    },
    article_select: {
        alignSelf: 'center',
        marginTop: 20,
        marginBottom: 20
    },
    article_select_child: {
        position: 'relative',
        width: 300, // 整体宽度缩小
    },
    article_card_img: {
        width: 125,
        height: 30,
        marginTop: 30
    },
    article_card1: {
        width: '80%',
        minHeight: 150,
        borderWidth: 10,
        borderColor: '#2F4F4F',
        borderRadius: 8,
        alignSelf: 'center',
        marginTop: 20,
        marginBottom: 20,
        backgroundColor: "#ffffff",
        padding: 10
    },
    article_card1_title: {
        fontSize: 18,
        fontWeight: 800
    },
    article_card2: {
        width: '80%',
        minHeight: 150,
        alignSelf: 'center',
        marginBottom: 20,
        padding: 10
    },
    article_card2_text: {
        fontSize: 16,
        fontWeight: 500,
        marginBottom: 20
    },
    article_card2_reading: {
        fontSize: 20,
        fontWeight: 600,
        color: '#F97316',
        marginTop: 10,
        textDecorationLine: 'underline'
    },
    article_card: {
        width: '100%',
        marginBottom: 20,
        marginTop: 10
    },
    buttome: {
        flex: 1,
        width: '100%',
        marginTop: 50,
        marginBottom: 50
    },
    buttome_subtitle: {
        fontSize: 30,
        fontWeight: 800,
        marginTop: 30,
        marginLeft: 80
    },
    // 新增：错误提示样式
    errorText: {
        color: 'red',
        fontSize: 16,
        padding: 20,
        textAlign: 'center',
    },
    loadingContainer: {
        flex: 1,                // 占满整个屏幕高度
        backgroundColor: '#fff',  // 与页面背景一致
        marginTop: 300
    },
});

export default Home;